<div class="row" ng-init="$ctrl.init()">
    <div class="col-md-5">
        <div class="" role="toolbar" aria-label="Toolbar with button groups">
            <div class="input-group input-group-sm mr-2" role="group" aria-label="First group">

                <select class="btn custom-select custom-select-sm col-6" ng-model="$ctrl.request.status" ng-change="$ctrl.callback({pageIndex: 0})">
                    <option ng-repeat="item in $ctrl.statuses track by $index" value="{{item.value}}">{{item.title}}</option>
                </select>
                <select class="btn custom-select custom-select-sm col-6" ng-model="$ctrl.request.orderBy" ng-change="$ctrl.callback({pageIndex: 0})">
                    <option ng-repeat="item in $ctrl.orders track by $index" value="{{item.value}}">{{item.title}}</option>
                </select>
                <select class="btn custom-select custom-select-sm col-3" ng-model="$ctrl.request.direction" ng-change="$ctrl.callback({pageIndex: 0})">
                    <option ng-repeat="item in $ctrl.directions track by $index" value="{{item.value}}">{{item.title}}</option>
                </select>
                <select class="btn custom-select custom-select-sm col-3" ng-model="$ctrl.request.pageSize" ng-change="$ctrl.callback({pageIndex: 0})">
                    <option ng-repeat="item in $ctrl.pageSizes track by $index" value="{{item}}">{{item}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="" role="toolbar" aria-label="Toolbar with button groups">
            <div class="input-group input-group-sm" role="group" aria-label="First group">
                <input type="date" data-date-format="dd.MM.yyyy" ng-model="$ctrl.dateRange.fromDate" class="form-control form-control-sm" ng-change="$ctrl.updateDate()">
                <input type="date" data-date-format="dd.MM.yyyy" ng-model="$ctrl.dateRange.toDate" class="form-control form-control-sm" ng-change="$ctrl.updateDate()">
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="input-group input-group-sm">
            <div class="input-group-prepend" ng-click="$ctrl.callback({pageIndex: 0})">
                <div class="input-group-text" id="btnGroupAddon"><i class="mi mi-Search" style="top:0;"></i></div>
            </div>
            <input ng-model="$ctrl.request.keyword" ng-enter="$ctrl.callback()" type="text" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="btnGroupAddon">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <a ng-if="$ctrl.createUrl" href="{{$ctrl.createUrl}}" class="btn btn-secondary">
            <i class="fas fa-plus"></i>
        </a>
    </div>
</div>
